<section class="listSection">
  <div class="listNav">
    主页>日志查询>连接断线日志
  </div>

  <section class="content selectContent">
    <div class="row">
      <div class="listBackgroungSelect text-center">
        <span>查询条件</span>
      </div>
      <div class="col-md-12 col-sm-12 col-xs-12 listSectionSelect" >
        <form #connectLogList="ngForm" (ngSubmit)="listMessage(connectLogList.value)" class="form-inline" >
          <div class="row">
            <div class="form-group search-list">
              <label>唯一标识： </label>
              <input [(ngModel)]="mn" name="mn" type="text" class="form-control" placeholder="请输入唯一标识">
            </div>
            <div class="form-group search-list">
              <label>客户端Ip：</label>
              <input [(ngModel)]="clientIp" name="clientIp" type="text" class="form-control" placeholder="请输入客户端Ip">
            </div>
            <div class="form-group search-list">
              <label for="startTime">开始时间： </label>
              <input type="text" [(ngModel)]="statrTime" class="form-control" id="startTime" name="startTime">
            </div>
            <div class="form-group search-list-btn">
              <button class="btn selectButtonOfA search-btn" type="submit" >查询</button>
            </div>
          </div>
          <div class="row">
            <div class="form-group search-list">
              <label for="endTime">结束时间： </label>
              <input [(ngModel)]="endTime" name="endTime"  id="endTime" type="text" class="form-control">
            </div>
            <div class="form-group search-list">
              <label>日志类型：</label>
              <select [(ngModel)]="type" name="type" class="form-control selectStyle">
                <option value="" >请选择日志类型</option>
                <option value="0">连接</option>
                <option value="1">断线</option>
              </select>
            </div>
            <div class="form-group search-list">            </div>
            <div class="form-group search-list search-list-btn">
              <button class="btn selectButtonOfA reset-btn" type="reset">清除</button>
            </div>
          </div>
        </form>
      </div>
    </div>
  </section>

  <section class="content">
    <div class="row">
      <div class="listBackgroungSelect text-center">
        <span>连接断线日志列表</span>
      </div>
      <div class="col-md-12 col-sm-12 col-xs-12">
          <div class="box-body">
            <table border="1" cellspacing="0"  class="table text-center listTable">
              <tr class="header-tab">
                <th>客户端Ip</th>
                <th>唯一标识</th>
                <th>类型</th>
                <th>创建时间</th>
                <th>操作</th>
              </tr>
              <tr *ngFor="let connect of list">
                <td>{{connect.clientIp}}</td>
                <td>{{connect.mn}}</td>
                <td>
                  <span *ngIf="connect.type=='0'">连接</span>
                  <span *ngIf="connect.type=='1'">断线</span>
                </td>
                <td>{{connect.createTime | date:'yyyy-MM-dd HH:mm:ss'}}</td>
                <td>
                  <span>
                     <img src="assets/icon/see.png" alt="查看">
                      <a href="#" data-toggle="modal" data-target="#myModal" (click)="userMessage(connect)">查看</a>
                  </span>
                </td>
              </tr>
            </table>
          </div>
          <page [pageParams]="{pageSize:pageSize,totalNum:totalNum,curPage:curPage,totalPage:totalPage}" (changeCurPage)="getPageData($event)"></page>
      </div>
    </div>
  </section>

  <!-- userMessage -->
  <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header text-center" >
          <div class="col-md-10 col-md-offset-1" style="margin-top: 20px;">
            <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            <h4 class="modal-title" id="myModalLabel">日志详情</h4>
          </div>
        </div>
        <div class="modal-body">
          <div class="row">
            <div class="col-md-10 col-md-offset-1">
              <table class="table detailsTable">
                <tr>
                  <td>客户端Ip：</td>
                  <td>{{queryMessage.clientIp}}</td>
                </tr>
                <tr>
                  <td>设备唯一标识：</td>
                  <td>{{queryMessage.mn}}</td>
                </tr>
                <tr>
                  <td>消息：</td>
                  <td>
                    <textarea readonly rows="8" cols="45" style="background: transparent;border: 0px red solid ">
                      {{queryMessage.message}}
                    </textarea>
                  </td>
                </tr>
                <tr>
                  <td>类型：</td>
                  <td>
                    <span *ngIf="queryMessage.type=='0'">连接</span>
                    <span *ngIf="queryMessage.type=='1'">断线</span>
                  </td>
                </tr>
                <tr>
                  <td>创建时间：</td>
                  <td>
                    {{queryMessage.createTime | date:'yyyy-MM-dd HH:mm:ss'}}
                  </td>
                </tr>
              </table>
            </div>
          </div>
        </div>
        <div class="modal-footer">
          <div class="form-group search-list-btn">
            <button  class="btn close-btn" role="button" data-dismiss="modal">返回</button>
          </div>
        </div>
      </div>
    </div>
  </div>

</section>


